<template>
    <div class="main">
        <div class="header">
           <div class="h-top"></div>
           <div class="h-bom">
                <div class="h-bom-lt"><span class="iconfont icon-wxbdingwei"></span></div>
                <div class="h-bom-cen">
                    <div class="dz"><span>湖南师范大学</span> <span class="iconfont icon-youbian"></span></div>
                    <div class="wd">阴 32°C</div>
            </div>
                <div class="h-bom-rt">
                    <span class="iconfont icon-more"></span>
                    <span class="iconfont icon-gerenzhongxin"></span>
                </div>
           </div>
        </div>
        <div class="body">
            <div class="body-nav">
                <div class="b-nav-lt">
                    <img src="@/assets/img/sousuo.png" alt="" class="sousuo">
                    <input type="text" class="inp" placeholder="请输入关键字">
                    <div class="tb">搜索</div>
            </div>
            <div class="ew">
            <img src="@/assets/img/ico-kefu.png" alt="" style="width:30px;height: 30px;">
            </div>
            <div class="kf">
            <img src="@/assets/img/ico-saoyisao.png" alt="" style="width:30px;height: 30px;">
        </div>
            </div>
            <div class="resou">
            热搜:&nbsp;&nbsp;美食&nbsp;&nbsp; 水果 &nbsp;&nbsp;蜜雪冰城&nbsp;&nbsp; 蛋糕 &nbsp;&nbsp;鱼人码头
            </div>
            <div class="lunbo">
                <img src="@/assets/img/lunbo.jpg" alt="" style="width:100%;height:100%">
            </div> 
            <div class="tongzhi-top">
                <span style="color:#d94b4b;font-weight: bold;font-size: 25px;">通知</span>
                &nbsp;&nbsp;<span style="color: #999;">|</span> &nbsp;&nbsp;
                <span>店铺上新,优惠限时促销</span>
            </div>
            <div class="body-bd">
                <div class="xh">
                    <img src="@/assets/img/ico-tips1.png" alt="" style="width:50px;height:55px">
                    <span >校园外卖</span>
                </div>
                <div class="xh">
                    <img src="@/assets/img/ico-tips2.png" alt="" style="width:50px;height:55px">
                    <span>校园美食</span>
                </div>
                <div class="xh">
                    <img src="@/assets/img/ico-tips3.png" alt="" style="width:50px;height:55px">
                    <span>酒店民宿</span>
                </div>
                <div class="xh">
                    <img src="@/assets/img/ico-tips4.png" alt="" style="width:50px;height:55px">
                    <span>电影演出</span>
                </div>
                <div class="xh">
                    <img src="@/assets/img/ico-tips5.png" alt="" style="width:50px;height:55px">
                    <span>美容美发</span>
                </div>
                <div class="xh">
                    <img src="@/assets/img/ico-tips6.png" alt="" style="width:50px;height:55px">
                    <span>饮品小吃</span>
                </div>
                <div class="xh">
                    <img src="@/assets/img/ico-tips7.png" alt="" style="width:50px;height:55px">
                    <span>教育培训</span>
                </div>
                <div class="xh">
                    <img src="@/assets/img/ico-tips8.png" alt=""  style="width:50px;height:55px">
                    <span>休闲娱乐</span>
                </div>
                <div class="xh">
                    <img src="@/assets/img/ico-tips9.png" alt=""  style="width:50px;height:55px">
                    <span>家政服务</span>
                </div>
                <div class="xh">
                    <img src="@/assets/img/ico-tips10.png" alt=""  style="width:50px;height:55px">
                    <span>汽车服务</span>
                </div>
            </div>
            <div class="bendi">
                <div class="bendi-top">
                    <div class="bdtp-lt">
                        <span style="color:#ca4341">本地</span>生活
                    </div>
                    <div class="bdtp-rt">
                        <span>更多</span>
                        <img src="@/assets/img/ico_gengduo.png" alt="" style="width: 18px;height: 18px;margin:0 8px">
                    </div>
                    
                </div>
                <div class="bndi-bom">
                    <div class="bd-xh">
                        <img src="@/assets/img/ico-tips1.png" alt="">
                        <span style="font-weight: 600;color: #ca4341;">￥69.0</span>
                    </div>
                    <div class="bd-xh">
                        <img src="@/assets/img/ico-tips1.png" alt="">
                        <span style="font-weight: 600;color: #ca4341;">￥69.0</span>
                    </div>
                    <div class="bd-xh">
                        <img src="@/assets/img/ico-tips1.png" alt="">
                        <span style="font-weight: 600;color: #ca4341;">￥69.0</span>
                    </div>
                    <div class="bd-xh">
                        <img src="@/assets/img/ico-tips1.png" alt="">
                        <span style="font-weight: 600;color: #ca4341;">￥69.0</span>
                    </div>
            </div>
            </div>
            <div class="bendi" style="margin: 10px 0;">
                <div class="bendi-top">
                    <div class="bdtp-lt">
                        <span style="color:#4ab47b">优惠</span>团购
                    </div>
                    <div class="bdtp-rt">
                        <span>更多</span>
                        <img src="@/assets/img/ico_gengduo.png" alt="" style="width: 18px;height: 18px;margin:0 8px">
                    </div>
                    
                </div>
                <div class="bndi-bom">
                    <div class="bd-xh">
                        <img src="@/assets/img/ico-tips7.png" alt="">
                        <div>
                        <span style="font-weight: 600;color: #ca4341;display: inline;">￥69.0</span>
                        <span style="font-size: 12px;color: #999;display: inline;"><s>￥78.8</s></span>
                    </div>
                </div>
                    <div class="bd-xh">
                        <img src="@/assets/img/ico-tips7.png" alt="">
                        <div>
                        <span style="font-weight: 600;color: #ca4341;display: inline;">￥69.0</span>
                        <span style="font-size: 12px;color: #999;display: inline;"><s>￥78.8</s></span>
                    </div>
                </div>
                    <div class="bd-xh">
                        <img src="@/assets/img/ico-tips7.png" alt="">
                        <div>
                        <span style="font-weight: 600;color: #ca4341;display: inline;">￥69.0</span>
                        <span style="font-size: 12px;color: #999;display: inline;"><s>￥78.8</s></span>
                    </div>
                </div>
                    <div class="bd-xh">
                        <img src="@/assets/img/ico-tips7.png" alt="">
                        <div>
                        <span style="font-weight: 600;color: #ca4341;display: inline;">￥69.0</span>
                        <span style="font-size: 12px;color: #999;display: inline;"><s>￥78.8</s></span>
                    </div>
                </div>
            </div>
            </div>
            <div class="body-fot">
                <div class="fot-dh">
                    <div class="dh-top" style="background:rgba(0,0,0,0.1);">
                        <img src="@/assets/img/ico-tips4.png" alt="" style="width:100%">
                    </div>
                    <div class="dh-bom">
                    <div class="dh-ms">
                        真臣雪媚娘蛋黄酥糕点
                    </div>
                    <div class="dh-yx">
                        <span style="color: #999;font-size: 14px;">4.5&nbsp;|&nbsp;月量498</span>
                    </div>
                    <div class="dh-yh">
                        <div class="yh-lt">30减15</div>
                        <div class="yh-rt">60减28</div>
                    </div>
                </div>
                </div>
                <div class="fot-dh">
                    <div class="dh-top" style="background:rgba(0,0,0,0.1);">
                        <img src="@/assets/img/ico-tips4.png" alt="" style="width:100%">
                    </div>
                    <div class="dh-bom">
                    <div class="dh-ms">
                        真臣雪媚娘蛋黄酥糕点
                    </div>
                    <div class="dh-yx">
                        <span style="color: #999;font-size: 14px;">4.5&nbsp;|&nbsp;月量498</span>
                    </div>
                    <div class="dh-yh">
                        <div class="yh-lt">30减15</div>
                        <div class="yh-rt">60减28</div>
                    </div>
                </div>
                </div>
                <div class="fot-dh">
                    <div class="dh-top" style="background:rgba(0,0,0,0.1);">
                        <img src="@/assets/img/ico-tips4.png" alt="" style="width:100%">
                    </div>
                    <div class="dh-bom">
                    <div class="dh-ms">
                        真臣雪媚娘蛋黄酥糕点
                    </div>
                    <div class="dh-yx">
                        <span style="color: #999;font-size: 14px;">4.5&nbsp;|&nbsp;月量498</span>
                    </div>
                    <div class="dh-yh">
                        <div class="yh-lt">30减15</div>
                        <div class="yh-rt">60减28</div>
                    </div>
                </div>
                </div>
                <div class="fot-dh">
                    <div class="dh-top" style="background:rgba(0,0,0,0.1);">
                        <img src="@/assets/img/ico-tips4.png" alt="" style="min-width:100%;vertical-align: middle;">
                    </div>
                    <div class="dh-bom">
                    <div class="dh-ms">
                        真臣雪媚娘蛋黄酥糕点
                    </div>
                    <div class="dh-yx">
                        <span style="color: #999;font-size: 14px;">4.5&nbsp;|&nbsp;月量498</span>
                    </div>
                    <div class="dh-yh">
                        <div class="yh-lt">30减15</div>
                        <div class="yh-rt">60减28</div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import axios from "axios";
// 导入阿里巴巴图标样式
import "@/assets/fonts/iconfont.css";
export default {
data () {
return {
    // head: require('@/assets/img/head.png'),   // require转换一下图片地址
}
},
 created() {
       
    },
};
</script>

<style scoped>
.header{
    height: 125px;
    width: 100%;
    background-color: #d94b4b;
    overflow: hidden;
}
.h-top{
  
}
.icon-wxbdingwei,.icon-more,.icon-gerenzhongxin{
    font-size: 25px;
}
.icon-youbian{
    font-size: 20px;
}
.h-bom{
  /* text-align: center; */
  color: #fff;
  font-size: 20px;
  margin-top: 66px;
}
.h-bom-lt,.h-bom-cen{
float: left;
}
.h-bom-lt{
padding: 0 20px;
}
.wd{
    color: #d4d2d2;
    font-size: 14px;
    text-align: left;
    line-height: 25px;
}
.h-bom-rt{
    height: 42px;
    width:90px;
    border-radius: 21px;
    background-color: #e6afaf;
    float: right;
    line-height:42px ;
    padding: 0 15px;
}
.icon-more{
   float: left;
}
.icon-gerenzhongxin{
  float: right;
}
.body-nav{
    display: flex;
    justify-content: space-around ;
    align-items: center;
}
.body{
    padding-right: 7px;
    padding-left: 7px;
    background-color: #e8e9eb;
    padding-top: 15px;
}
.body-nav .inp{
    outline: none;
    height: 40px;
    /* width: 360px; */
    border: 2px solid #d54945; 
    border-radius: 20px;
    padding-left: 46px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
}
.b-nav-lt{
flex: 7;
}
.ew{
    flex: 1.5;
}
.kf{
    flex: 1.5;
}

.b-nav-lt{
    position: relative;
}
.sousuo{
    height: 30px;
    width: 30px;
    position: absolute;
    top: 7px;
    left: 12px;
}
.tb{
    width: 70px;
    height: 40px;
    border-radius: 20px;
    background: #ce4242;
    line-height: 40px;
    text-align: center;
    color: #fff;
    position: absolute;
    right: 0;
    top: 0;
}
.resou{
    color: #999;
    text-align: left;
    height: 50px;
    line-height: 50px;
    font-size: 14px;
}
.lunbo{
    width: 100%;
    height: 200px;
}
.tongzhi-top{
    height: 42px;
    background: #fff;
    margin-top: 10px;
    overflow: hidden;
    line-height: 42px;
    border-radius: 5px;
    text-align: left;
    padding-left: 10px;
    margin-bottom: 15px;
}
.body-bd{
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
   align-items: center;
   padding: 20px 0;
}
.xh span{
    display: block;
    margin-top: 10px;
}
.xh{
   flex: 2 2 20%;
   overflow: hidden;
   margin-bottom: 20px;
}
.bendi{
    background-color: #fff;
    border-radius: 5px;
    padding-bottom: 15px;
}
.bendi-top{
    display: flex;
    justify-content: space-between;
    line-height: 50px;
    align-items: center;
    height: 50px;
}
.bdtp-lt{
    font-size: 24px;
    font-weight: 600;
}
.bdtp-rt{
    display: flex;
    align-items: center;
    font-size: 16px;
    color: #999;
}
.bndi-bom{
    display: flex;
    align-items: center;
    font-size: 16px;
    text-align: center;
    justify-content: space-around;
}
.bd-xh span{
    display: block;
}
.body-fot{
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.fot-dh{
    padding-bottom: 10px;
    background-color: #fff;
    border-radius: 10px;
    width: 48%;
    margin-bottom: 10px;
}
.dh-ms{
    text-align: left;
    font-weight: 600;
    font-size: 16px;
    line-height: 40px;
}
.dh-yx{
    text-align: left;
    line-height: 25px;
}
.yh-lt{
    border: 1px solid #ce4242;
    color: #ce4242;
    font-size: 14px;
    width: 50px;
    margin-right: 10px;
}
.yh-rt{
    border: 1px solid #ce4242;
    color: #ce4242;
    font-size: 14px;
    width: 50px;
}
.dh-yh{
    display: flex;
}
.dh-top {
    border-radius:10px 10px 0 0 ;
}
.dh-bom{
    padding-left: 6px;
}
.body{
    position: absolute;
    top: 125px;
    bottom: 80px;
    left: 0;
    right: 0;
    overflow: auto;
}
.main{
    margin-bottom: 80px;
}
</style>
